<!--  -->
<template>
  <div>
    <div class="datePicker">
      <el-date-picker
        v-model="dateTime"
        format="yyyy - MM - dd "
        value-format="yyyy-MM-dd"
        @change="changeDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <div class="divbox">
      <h2>商品分析</h2>
      <div>
          <template >
            <el-table :data="goodInfoData" style="width: 70%" class="goodTable" >
              <el-table-column prop="goodsTypeName" label="分类名称">
              </el-table-column>
              <el-table-column
                prop="goodsPayNum"
                label="支付商品数量"
              >
              </el-table-column>
              <el-table-column prop="goodsPayMoney" label="支付商品金额">
              </el-table-column>
              <el-table-column
                prop="goodsRefundNum"
                label="退款商品数量"
              >
              </el-table-column>
              <el-table-column prop="goodsPayRefundMoney" label="退款商品金额">
              </el-table-column>
              <el-table-column prop="goodsRefundRate" label="退款率">
              </el-table-column>
            </el-table>
          </template>
        <div ref="goodsChart" style="height:300px;width:300px" id="goodsChart"></div>
         
      </div>
    </div>
    <div class="goodDetail">
        <h2>商品销售详情</h2>
        <div>
          <template>
            <el-table :data="goodDetail" style="width: 100%">
              <el-table-column prop="goodsUuid" label="商品编号">
              </el-table-column>
              <el-table-column
                prop="goodsName"
                label="商品名称"
              >
              </el-table-column>
              <!-- <el-table-column prop="goodGuige" label="商品规格">
              </el-table-column> -->
              <el-table-column
                prop="goodsTypeName"
                label="商品分类"
              >
              </el-table-column>
              <el-table-column prop="goodsPayNum" label="支付商品数">
              </el-table-column>
              <el-table-column prop="goodsPayMoney" label="商品支付总金额">
              </el-table-column>
              <el-table-column
                prop="goodsRefundNum"
                label="退款商品数量"
              >
              </el-table-column>
              <el-table-column prop="goodsPayRefundMoney" label="退款商品金额">
              </el-table-column>
              <el-table-column prop="goodsRefundRate" label="退款率">
              </el-table-column>
            </el-table>
        </template>
        </div>
    </div>

  </div>

</template>

<script>
// import * as echarts from 'echarts';
export default {
  name:'goodsAnalysis',
  data () {
    return {
      dateTime: [],
      dateRange: [],
      goodInfoData:[
        {
          goodsTypeName:"食品",//分类名称
          payGoodsNum:"1452",//支付商品数量
          payMoney:'7861.43',//支付商品金额
          refundGoodsNum:'19',//退款商品数量
          refundMoney:'574.57',//退款商品金额
          refundRate:'0.9%',//退款率
        },
        {
          goodsTypeName:"家电",//分类名称
          payGoodsNum:"542",//支付商品数量
          payMoney:'4861.43',//支付商品金额
          refundGoodsNum:'11',//退款商品数量
          refundMoney:'974.50',//退款商品金额
          refundRate:'0.6%',//退款率
        },
        {
          goodsTypeName:"衣服",//分类名称
          payGoodsNum:"1042",//支付商品数量
          payMoney:'5874.81',//支付商品金额
          refundGoodsNum:'20',//退款商品数量
          refundMoney:'280.06',//退款商品金额
          refundRate:'0.8%',//退款率
        },
        {
          goodsTypeName:"百货",//分类名称
          payGoodsNum:"720",//支付商品数量
          payMoney:'3842.81',//支付商品金额
          refundGoodsNum:'21',//退款商品数量
          refundMoney:'302.00',//退款商品金额
          refundRate:'1.0%',//退款率
        },
        {
          goodsTypeName:"数码",//分类名称
          payGoodsNum:"629",//支付商品数量
          payMoney:'3742.81',//支付商品金额
          refundGoodsNum:'21',//退款商品数量
          refundMoney:'420.00',//退款商品金额
          refundRate:'1.3%',//退款率
        },
        {
          goodsTypeName:"医药",//分类名称
          payGoodsNum:"770",//支付商品数量
          payMoney:'1742.81',//支付商品金额
          refundGoodsNum:'13',//退款商品数量
          refundMoney:'102.00',//退款商品金额
          refundRate:'1.2%',//退款率
        }
      ],
      // goodOption:[
      //   {
      //     name:'食品',value:'38'
      //   },{
      //     name:'家电',value:'17'
      //   },
      //   {
      //     name:'衣服',value:'18'
      //   },{
      //     name:'百货',value:'15'
      //   },{
      //     name:'数码',value:'6'
      //   },{
      //     name:'医药',value:'6'
      //   }
      // ],
      goodOption:[],
      goodDetail:[],
      goodsChart:'',
      fileList:[],
      formData:''
    }
  },

  mounted(){
    this.getGoodsClassify()
    this.getGoodsDetail()
    this.defaultTime()
  },
  updated(){
    this.drawGoodsChart()
  },
  watch: {
    dateRange(val) {
      this.drawGoodsChart();
    },
  },
  methods:{
    getGoodsClassify(){
      this.$axios.post('/api/index/analysisData1').then((res)=>{
        console.log(res)
        var list = res.data.data
        list.forEach(v=>{
          if(v.goodsRefundRate==null){
            v.goodsRefundRate=0
          }
          if(v.goodsPayRefundMoney==null){
            v.goodsPayRefundMoney=0
          }
          if(v.goodsRefundNum==null){
            v.goodsRefundNum=0
          }
          v.goodsRefundRate =v.goodsRefundRate.toFixed(4)*100+'%'
        })
        this.goodInfoData = list
      
        var totalMoney=0
        list.forEach((v)=>{
          totalMoney += v.goodsPayMoney
        })
        // console.log(totalMoney)
        var data = []
        list.forEach((v)=>{
          data.push({
            name:v.goodsTypeName,
            value: (v.goodsPayMoney/totalMoney)*100
          })
        })
        this.goodOption=data
        
      })
    },
    getGoodsDetail(){
      this.$axios.post('/api/index/analysisData2').then((res)=>{
        console.log(res)
        var list = res.data.data
        list.forEach(v=>{
          if(v.goodsRefundRate==null){
            v.goodsRefundRate=0
          }
          if(v.goodsPayRefundMoney==null){
            v.goodsPayRefundMoney=0
          }
          if(v.goodsRefundNum==null){
            v.goodsRefundNum=0
          }
          v.goodsRefundRate =v.goodsRefundRate.toFixed(4)*100+'%'
        })
      this.goodDetail=list
      })
    },
    drawGoodsChart(){
      let echarts = require("echarts");
      if(this.goodsChart){
        this.goodsChart.dispose()
      }
      this.goodsChart=echarts.init(this.$refs.goodsChart)
      
      let options={
         title: {
          text: '商品分类支付占比',
          left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {d}%"
        },
        legend: {
          bottom:'bottom',
        },
        series: [
            {
                name: '支付占比',
                type: 'pie',
                radius: '50%',
                center: ['50%', '50%'],
                data:this.goodOption,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
      }
      this.goodsChart.setOption(options)
    },
    defaultTime() {
      let nowdate = new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000);
      
      var y = nowdate.getFullYear().toString();
      var m = nowdate.getMonth()+1<10 ? '0' +(nowdate.getMonth()+1).toString():(nowdate.getMonth()+1).toString();
      var d = nowdate.getDate()<10?'0'+(nowdate.getDate()).toString():nowdate.getDate().toString();
      var formatwdate = y+'-'+m+'-'+d;
      console.log(formatwdate)
      //k开始时间
      let startTime = y + "-" + m + "-" + d;
      
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString();
      let day =
        date.getDate() < 10
          ? "0" + date.getDate().toString()
          : date.getDate().toString();
      // //结束时间
      let endTime = year + "-" + month + "-" + day;
      this.dateTime = [startTime, endTime];
      // this.dateRange = this.getDateInfo(startTime, endTime);
    },
    getDateInfo(start, end) {
      var result = [];
      var beginDay = start.split("-");
      var endDay = end.split("-");
      var diffDay = new Date();
      var dateList = new Array();
      var i = 0;
      diffDay.setDate(beginDay[2]);
      diffDay.setMonth(beginDay[1] - 1);
      diffDay.setFullYear(beginDay[0]);
      result.push(start);
      while (i == 0) {
        var countDay = diffDay.getTime() + 24 * 60 * 60 * 1000;
        diffDay.setTime(countDay);
        dateList[2] = diffDay.getDate();
        dateList[1] = diffDay.getMonth() + 1;
        dateList[0] = diffDay.getFullYear();
        if (String(dateList[1]).length == 1) {
          dateList[1] = "0" + dateList[1];
        }
        if (String(dateList[2]).length == 1) {
          dateList[2] = "0" + dateList[2];
        }
        result.push(dateList[0] + "-" + dateList[1] + "-" + dateList[2]);
        if (
          dateList[0] == endDay[0] &&
          dateList[1] == endDay[1] &&
          dateList[2] == endDay[2]
        ) {
          i = 1;
        }
      }
      console.log(result);
      return result;
    },
    changeDate(val) {
      // console.log(val);
      this.dateRange = this.getDateInfo(val[0], val[1]);
    },

  }
}
</script>

<style  scoped>
.datePicker {
  text-align: left;
  margin: 30px 20px;
}
h2 {
  font-size: 16px;
  text-align: left;
  padding-left: 20px;
  margin: 30px 0;
}
.divbox{
  overflow: hidden;
  border-top: 1px solid #e6e6e6;
}
.goodTable{
  float: left;
  padding-left: 20px;
}
#goodsChart{
  float: right;
}
.goodDetail{
  margin: 30px 0;
  padding-left: 20px;
  border-top: 1px solid #e6e6e6;
  height: 100%;
}
</style>
